<template>
  <div class="user-container">
    <!-- 顶部导航 -->
    <van-nav-bar class="page-nav-bar" title="个人中心">
      <van-icon @click="$router.go(-1)" class="left-icon" slot="left" name="arrow-left" />
    </van-nav-bar>

    <input ref="inp" type="file" hidden @change="onInputChnage">
    <van-cell @click="$refs.inp.click()" title="头像" is-link>
      <van-image
        round
        class="avatar"
        :src="users.photo"
      />
    </van-cell>
    <van-cell title="昵称" @click="isShowEditName = true" :value="users.name" is-link/>
    <van-cell title="性别" @click="isShowEditGender = true" :value="users.gender ? '女' : '男'" is-link/>
    <van-cell title="生日" @click="isShowEditBirthday = true" :value="users.birthday" is-link/>

    <!-- 编辑昵称弹层 -->
    <van-popup v-model="isShowEditName" position="bottom" :style="{ height: '100%' }">
      <EditName
      v-if="isShowEditName"
      v-model="users.name"
      @left-close="isShowEditName = false"
      />
    </van-popup>

    <!-- 编辑性别弹层 -->
    <van-popup v-model="isShowEditGender" position="bottom">
      <EditGender v-if="isShowEditGender" v-model="users.gender" @close-popup="isShowEditGender = false"/>
    </van-popup>

    <!-- 编辑生日弹层 -->
    <van-popup v-model="isShowEditBirthday" position="bottom">
      <EditBirthday
      v-if="isShowEditBirthday"
      @close-popup="isShowEditBirthday = false"
      v-model="users.birthday"/>
    </van-popup>

    <!-- 编辑头像弹层 -->
    <van-popup v-model="isShowEditAvatar" position="bottom" style="height: 100%">
      <EditAvatar
      @onUploadSuccess="users.photo = $event"
      v-if="isShowEditAvatar"
      @close-popup="isShowEditAvatar = false" :imgUrl="imgUrl" />
    </van-popup>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user.js'
import EditName from './components/edit-name.vue'
import EditGender from './components/edit-gender.vue'
import EditBirthday from './components/edit-birthday.vue'
import EditAvatar from './components/edit-avatar.vue'
export default {
  data () {
    return {
      users: {}, // 保存用户数据
      isShowEditName: false,
      isShowEditGender: false,
      isShowEditBirthday: false,
      imgUrl: '', // 保存上传图片的url
      isShowEditAvatar: false
    }
  },

  components: {
    EditName,
    EditGender,
    EditBirthday,
    EditAvatar
  },

  created () {
    this.loadUserProfile()
  },

  methods: {
    // 加载用户信息
    async loadUserProfile () {
      try {
        const res = await getUserInfo()
        this.users = res.data.data
      } catch (err) {
        this.$toast('获取数据失败')
      }
    },
    // input 文件框发生变化了
    onInputChnage (e) {
      // 获取到选择的文件
      const file = e.target.files[0]
      // 将文件转成url
      const imgUrl = URL.createObjectURL(file)
      this.imgUrl = imgUrl
      this.isShowEditAvatar = true
      // 清空value 防止下次选择同样的图片不触发change事件
      e.target.value = ''
    }
  }
}
</script>

<style scoped lang='less'>
.user-container {
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
